<template>
    <div>
        选择分类
        <showcate :data='catelist' @cid='getcid'/>

        
        <van-field
        v-model="name"
        name="名称"
        label="名称"
        placeholder="名称"
        :rules="[{ required: true, message: '请填写名称' }]"
    />
    <van-field
        v-model="description"
        name="描述"
        label="描述"
        placeholder="描述"
    />
    <van-field
        v-model="tname"
        name="讲师"
        label="讲师"
        placeholder="讲师"
    />
    <van-image
        width="100"
        height="100"
        :src="pic"
    />
    图片上传：<van-uploader :after-read="afterRead"/>

    视频上传：<van-uploader :after-read="afterReadVedio" v-model="fileList" multiple :max-count="3" accept=".mp4"/>
    <br>
    <van-button type="primary" @click='add'>添加</van-button>
        </div>
</template>

<script>
import showcate from './showcate.vue'

    export default {
        components:{
            'showcate':showcate
        },
        data(){
            return{
                name:'',
                description:'',
                tname:'',
                fileList:[],
                pic:'http://localhost:5000/static/upload/20210914154224_1.jpg',
                catelist:[],
                cid:0,
                vedios:[]

            }
        },
        methods: {
             //图片上传
        afterRead(file,type=1){
            alert(type)
            let data = new FormData()
            data.append('id',1)
            data.append('file',file.file)
            this.$axios.post('lianxi/upload/',data).then(res=>{
                //视频
                if(type == 2){
                    this.vedios.push(res.data.pic)
                }else{
                    this.pic = res.data.pic
                }
                
            })
        },
        //视频上传
        afterReadVedio(){
            // 遍历Filelist
            for(var i =0;i<this.fileList.length;i++){
                this.afterRead(this.fileList[i],2)
            }
        },
        //获取所有分类信息
        getCatelist(){
            this.$axios.get('lianxi/showcate/').then(res=>{
                    this.catelist =res.data.list
                })
        },
        //获取选中的分类id
        getcid(v){
            alert(v)
            //更新分类id
            this.cid=v
        },
        //添加
        add(){
            console.log(this.vedios)
            let data={
                'name':this.name,
                'description':this.description,
                'tname':this.tname,
                'pic':this.pic,
                'cid':this.cid,
                'vedios':this.vedios,
            }
            this.$axios.post('lianxi/keadd/',data).then(res=>{
                
            })
        }
        },
        mounted() {
            this.getCatelist()
        },

    }
</script>

<style scoped>

</style>